<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <!-- 引入在线资源 -->
    <script src="./g2.min.js"></script>
</head>

<body>
    <div id="c1">

    </div>
    <script>
        let data = [
            {color:"#68d3b1"},
            { name:"容量"},
            {value:0.001}
        ]
        drawChart(data);
       	function drawChart(datas){
				let data = datas;

				let chart = new G2.Chart({
                    container: 'c1',
                    width: 200,
		          	height: 200,
		          	forceFit: true,
                    padding: 10,
		          	animate:true
		        });
		        //绘制底层圆环
		        chart.source([{name:'cricle',percent:1}]);
		        chart.coord('polar', {
	                inner: 1 - 0.15
	            }).transpose();
	            chart.tooltip(false);
		        chart.legend(false);
		        chart.interval().position('name*percent').color('#f1efeb').opacity(1);
		        chart.changeData([{name:'cricle',percent:1}]);
		        //绘制上层圆环
		        let chart2 = chart.createView();
    	        chart2.source(data,{
    	        	value:{
    	        		min:0,
    	        		max:1
    	        	}
    	        });
    	        chart2.coord('polar', {
                    inner: 1 - 0.15
                }).transpose();
    	        chart2.tooltip(false);
    	        chart2.interval().position('name*value').color('color',function(){
    	        	if(data.length>0){
    	        		return data[0].color
    	        	}
    	        }).opacity(1);
		        chart.render();
		        // this.count ++ 
			}
    </script>
</body>

</html>